<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">

<body>
	<wicket:panel>

		<div id="gradebookSorter" class="by-category" role="application">
			<span id="sort-instructions" class="sr-only">
				<wicket:message key="sortgradeitems.instructions">
					Instructions for sorting categories will go here.
				</wicket:message>
			</span>

			<input type="hidden" name="orderby" value="category"/>

			<div wicket:id="categoriesList" class="gb-sorter-category" aria-level="1" role="listitem">
				<input wicket:id="category_id" type="hidden"/>
				<input wicket:id="category_order" type="hidden"/>
				<input wicket:id="category_current_order" type="hidden"/>
				<div class="d-flex align-items-center">
					<button type="button"
							class="btn-transparent me-2 category-drag-handle"
							aria-pressed="false"
							aria-describedby="sort-instructions">
						<span class="si si-drag-handle" aria-hidden="true"></span>
						<span class="category-name h4" wicket:id="name"></span>
					</button>
				</div>
				<ul>
					<li wicket:id="gradeItemList" class="gb-sorter-sortable" aria-level="2">
						<input wicket:id="id" type="hidden"/>
						<input wicket:id="order" type="hidden"/>
						<input wicket:id="current_order" type="hidden"/>
						<div class="d-flex align-items-center">
							<button type="button"
									class="btn-transparent me-2 category-item-drag-handle"
									aria-pressed="false"
									aria-describedby="sort-instructions">
								<span class="si si-drag-handle" aria-hidden="true"></span>
								<span wicket:id="name"></span>
							</button>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<script>new GradebookSorter($("#gradebookSorter"));</script>

	</wicket:panel>
</body>
</html>
